<template>
  <div class="demo-input-suffix">
    所属断面
    <el-select v-model="value" placeholder="请选择" @change="towerChange">
      <el-option
        v-for="item in sectionList"
        :key="item.id"
        :label="item.sectionName"
        :value="item.id"
      ></el-option>
    </el-select>
    <el-button icon="el-icon-search" class="select" @click="addProductHandle" type="primary">查询</el-button>
    <el-button icon="el-icon-plus" class="save" @click="addProductHandle" type="primary">添加</el-button>
    <el-button icon="el-icon-upload" class="save" @click="handleImport" type="primary">导入数据</el-button>

    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-input v-if="false" v-model="wId" name="wId"/>
      <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url + '?wId='+wId "
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="submit" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import api from "../../../api/base";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      wId: '',
      sectionList: [],
      value: '--全部--',
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization:  getToken() },
        // 上传的地址
        url: api.baseUrl  + api.monitorFootUpload,
      },
    }
  },
  mounted() {
    this.$bus.$on('onAddMonitorFootWid', (flag) => {
      this.wId = flag
      this.findByTunnelSction(flag)
    })
  },
  methods: {
    findByTunnelSction(wid) {
      api
        .tunnelSectionfindByWid({ wid })
        .then((res) => {
          if ((res.data.code = 2001)) {
            this.sectionList = res.data.data
          }
        })
    },
    addProductHandle() {
      this.$bus.$emit('onAddMonitorFootShow', true)
    },
    ImportData() {
      this.$bus.$emit('onAddMonitorFootUploadShow', true)
    },
    towerChange(e) {
      this.$bus.$emit('onRefreshmonitorFoot', { wId: this.wId, sId: e })
    },
    /** 导入按钮操作 */
    handleImport() {
      if(this.wId == ''){
        this.$message({
          type: 'warning',
          message: "请选择洞幅"
        })
        return
      }
      this.upload.title = "拱脚下沉导入数据";
      this.upload.open = true;
    },// 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      if(response.code == 2001){
        this.$message({
          type: 'success',
          message: "上传成功"
        })
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
      }else {
        this.$message({
          type: 'fail',
          message: response.message
        })
      }
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
}
</script>

<style scoped>
.save {
  margin-left: 10px;
}
.demo-input-suffix {
  text-align: left;
  width: 100%;
  height: 60px;
  background-color: #fff;
  padding-left: 10px;
  padding-top: 10px;
  margin-bottom: 10px;
  color: #606266;
}

.select{
  margin-left: 10px;
}

.save{
   margin-left: 10px;
   border: none;
   border: 2px solid #409EFF;
   background-color: white;
   color: #409EFF;
   height: 40px;
    padding-top: 10px;
}
.ImportData{
  margin-left: 10px;
  border: none;
  border: 2px solid #409eff;
  background-color: white;
  color: #409eff;
}
</style>
